<template>
    <div class="edit-outer">
        <el-dialog
            :title="title"
            :visible.sync="drawerVisible"
            :before-close="handleClose"
            :width="size"
            class="eidt-body"
        >
            <div class="z-tabs">
                <div class="el-tabs el-tabs--left">
                    <div class="el-tabs__header is-left">
                        <div class="el-tabs__nav-wrap is-left">
                            <div class="el-tabs__nav-scroll">
                                <div class="el-tabs__nav is-left">
                                    <div
                                        class="el-tabs__active-bar is-left"
                                        :style="{
                                            height: '40px',
                                            transform: `translateY(${num}px)`
                                        }"
                                    />
                                    <div v-for="(item, index) in tabsConfig" :key="item">
                                        <div
                                            :id="`tab-${index}`"
                                            tabindex="-1"
                                            :class="
                                                currentIndex === index
                                                    ? 'el-tabs__item is-left is-active'
                                                    : 'el-tabs__item is-left'
                                            "
                                            @click="handleTab(index)"
                                        >
                                            {{ item }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div ref="topInfo" class="drawer-body" @mousewheel="jumpDom()" @DOMMouseScroll="jumpDom()">
                <div class="body-in">
                    <slot />
                </div>
            </div>

            <span class="dialog-footer-tabs">
                <slot name="footer" />
            </span>
        </el-dialog>
    </div>
</template>
<script>
/****
 *  "drawerVisible",
    "direction",
    "title",
    "stepId",
    "stepTitle",
    "tabsConfig",
    "size"
 */
export default {
    components: {},
    props: {
        drawerVisible: {
            type: Boolean,
            default: false
        },
        direction: {
            type: String,
            default: 'rtl'
        },
        title: {
            type: String,
            default: '新增'
        },
        tabsConfig: {
            type: Array,
            default: () => {
                return []
            }
        },
        size: {
            type: String,
            default: '800px'
        },
        tabsIdConfig: {
            type: Array,
            default: () => {
                return []
            }
        }
    },
    data() {
        return {
            tabPosition: 'left',
            currentIndex: 0,
            num: 1,
            tabContent: 0
        }
    },
    mounted() {
        // this.$nextTick(() => {
        //   let domScrll = document.querySelector(".eidt-body");
        //   domScrll.addEventListener("wheel", function(e) {
        //     console.log("ddd");
        //     e.preventDefault();
        //     e.stopPropagation();
        //   });
        //   domScrll.addEventListener("touchmove", function(e) {
        //     console.log("ddd");
        //     e.preventDefault();
        //     e.stopPropagation();
        //   });
        // });
    },
    methods: {
        handleTab(index) {
            this.currentIndex = index
            this.num = 40 * index
            this.tabContent = 100 * index
            var anchor = this.$el.querySelector(`#pane-${index}`)
            this.$refs.topInfo.scrollTop = anchor.offsetTop
        },
        handleClose() {
            this.$emit('update:drawerVisible', false)
            this.num = 0
            this.$refs.topInfo.scrollTop = 0
        },
        jumpDom() {
            let height = this.$refs.topInfo.scrollTop
            let docHeight = []
            this.$nextTick(() => {
                this.tabsIdConfig.forEach((item, index) => {
                    var anchor = this.$el.querySelector(item)
                    let domHeight = anchor.offsetTop
                    let S = Math.abs(Number(height) - Number(domHeight))
                    docHeight.push(S)
                })
                let minIndex = docHeight.indexOf(Math.min.apply(null, docHeight))
                this.currentIndex = minIndex
                this.num = 40 * minIndex
            })
        }
    }
}
</script>

<style lang="scss">
.eidt-body {
    height: 100%;
    overflow: hidden;
}
.edit-outer {
    .el-dialog__body {
        height: 600px;
        overflow: hidden;
    }
    .z-tabs {
        float: left;
    }
    .dialog-footer-tabs {
        position: absolute;
        bottom: 0px;
        right: 0px;
        background: #fff;
        padding-top: 15px;
        padding-bottom: 15px;
        z-index: 90;
        text-align: right;
        margin-right: 24px;
        overflow: hidden;
        display: block;
    }
    .body-in {
        padding-left: 120px;
        text-align: left;
        padding-bottom: 150px;
        padding-right: 60px;
    }
    .el-tab-pane-1 {
        min-height: 200px;
        height: auto;
        width: 100%;
    }
    .drawer-head {
        text-align: left;
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid #cccccc;
        font-weight: bold;
        padding-left: 20px;
        padding-right: 20px;
    }
    .drawer-body {
        overflow-x: hidden;
        overflow-y: scroll;
        height: 85%;
        width: 100%;
        position: absolute;
    }
    .el-dialog__body {
        padding: 0px !important;
    }
}
</style>
